<template>
	<div class="main">
		<div class="outDiv">
			<go-back aa='../chooseCourse/addIntention'></go-back>
			<h2 class="fixh2">优势科目排序</h2>
			<div>

				<div class="advanmain">
					<div class="careerTests">
						<div class="title">
							<div class="left flex-h"><span class="flex1 sp1">请选择一种优势科目排序方式</span> <span class="bsp"></span></div>

						</div>
						<div class="tabBar flex-h">
							<span @click="tabs(1)" class="sp flex1">
								<img class="imgIcon" :src="tabsNum==1?imgs1:imgs2" alt="">
								<b>测评排序</b>
							</span>
							<span @click="tabs(2)" class="sp flex1">
								<img class="imgIcon" :src="tabsNum==2?imgs1:imgs2" alt="">
								<b>手动排序</b>
							</span>
						</div>
						<div v-show="tabsNum==1">
							<scroller style="top: 2.6rem;">
								<div style="padding: 0 0.3rem;box-sizing: border-box;margin-top: 0.2rem;">
									<div class="content_no_add" v-if="careerList.length == 0">
										<p>尚未进行优势科目测评</p>
										<button @click="commonJs.gosto('chooseTest')">去测评</button>
									</div>
									<div v-if="careerList.length > 0">
										<div class="ysBox" style="height: 12rem;">
											<span class="spys" v-for="(item,index) in careerList" :key='index'><i>NO.{{index+1}}</i><b>{{item}}</b></span>
											<span class="gocp" @click="commonJs.gosto('chooseTest')">重新测评</span>
										</div>
									</div>
									<div style="height: 1rem;"></div>
								</div>
							</scroller>
						</div>
						<div v-show="tabsNum==2">
							<div>
								<div class="titlesDrag flex-h">
									<span class="sp1">优</span>
									<span class="flex1 sp2">以下科目可长按图标拖动排序</span>
								</div>
								<div class="tzbox">
									<specIssue :items='ites2' v-on:fromChildData='getChildData'></specIssue>
								</div>


								<div class="titlesDrag titlesDrag1 flex-h">
									<span class="sp1">劣</span>
									<span class="flex1 sp2"></span>
								</div>
								<!-- 	<div class="commonBox zyxq">
										<span class="sp3" @click="nextZu('IndResult')">做完了</span>
									</div> -->
							</div>
						</div>


					</div>

				</div>
				<div style="width: 100%;height: 2.8rem;"></div>
			</div>
			<!-- </scroller> -->
		</div>
		<div class="botFixed">
			<!-- <span class="cssp">还剩<b>{{xkzhTimes}}</b>次生成次数</span> -->
			<span @click="goNext" class="ss2">下一步</span>
		</div>
		<!-- <div class="x-daliag-wrap" v-show="xdalag">
			<div class="x-daliag-box">

				<h3>使用卡劵</h3>
				<span v-show="index<3" :class="['x-daliag-sp',spIndex===index?'active':'']" v-for="(item,index) in conponsyData"
				 :key="index" @click="hexiao(item,index)">{{item}}</span>
				<span :class="['x-daliag-sp', 'x-input',spIndex===100?'active':'']" @click="hexiao1"><input type="text" placeholder="请输入您的卡劵号码"
					 v-model="copus" v-on:blur="commonJs.blurAdjust" /></span>
				<div class="btnGroup flex-h">
					<button class="reset flex1" @click="closeDaliag">关闭</button>
					<button class="submit flex1" @click="sureCoupon">确定</button>
				</div>
	
			</div>
		</div> -->
		<!-- <div class="xx-sures" v-show="xxbosx">
			<div class="xx-box">
				<h2>您添加的意向专业类</h2>

				<span class="xx-box-sp" v-for="(item,index) in nopayyxData" :key="index">{{item}}</span>
				<span class="xpsucces">恭喜您购买成功</span>
				<span class="sptext">温馨提示:点击“确定”将会保留你所添加的意向专业类，作为生成选科选课方案的依据；点击“返回修改”您可以重新添加。</span>
				<div class="btnGroup flex-h xx-box-btn">
					<button class="reset flex1" @click="commonJs.gosto('addIntention')" style="font-weight: 500;">返回修改</button>
					<button class="submit flex1" @click="xxbosx=false">确定</button>
				</div>

			</div>
		</div> -->
	</div>
</template>

<script>
	import Header from '~/components/Header'
	import goBack from '~/components/goBack'
	import { getUsage, getAdvantageUsage, verification} from "~/api/selectCourse"
	import { coupons } from "~/api/mall"
	import specIssue from '~/components/specIssue'
	import ls from 'store2'
	export default {
		components: {
			Header,
			specIssue,
			goBack
		},
		data() {
			return {
				xkzhTimes: 0,
				nopayyxData: [],
				xxbosx: false,
				spIndex: 0,
				conponsyData: [],
				copus: '',
				xdalag: false,
				zhuanye: [],
				careerList: [],
				careerChooseList: [],
				botList: [],
				hasCho_1: true,
				hasCho_2: true,
				hasCho_3: false,
				xNum: this.$store.state.xxNum,
				tabsNum: 1,
				ites2: [{
					nm: '历史',
					type: 'R'
				}, {
					nm: '化学',
					type: 'I'
				}, {
					nm: '地理',
					type: 'A'
				}, {
					nm: '政治',
					type: 'S'
				}, {
					nm: '生物',
					type: 'E'
				}, {
					nm: '物理',
					type: 'C'
				}],
				strs: '历史化学地理政治生物物理',
				strs1: '',
				stall: '',
				imgs1: require('~/static/images/icon_circle_s.png'),
				imgs2: require('~/static/images/icon_circle_n.png')
			}
		},
		created() {
			// this.checkCoupon()
			// this.commonJs.gologins();
	
			let sts = ls.get('jgpx')
			if (sts) {
				this.careerList = sts;

				sts.forEach(i => {
					this.strs1 += i
				})
				
			}
			if (ls.get('nopayxkyx')) {
				this.nopayyxData = ls.get('nopayxkyx')
			}
		}, 
		mounted: function() {
			//  this.getusage()
// 			if (ls.get('xkZhtimes')) {				
// 				ls.get('xkZhtimes') == 10000 ? this.xkzhTimes = '无限' :ls.get('xkZhtimes') < 0?this.xkzhTimes = 0  :this.xkzhTimes = ls.get('xkZhtimes')
// 			}
			// if (this.commonJs.GetUrlParam('pay_status') == 'success') {
			// 			this.$vux.toast.text("支付成功");
			// }else if(this.commonJs.GetUrlParam('pay_status') == 'failed'){
			// 	this.$vux.toast.text("支付失败，请重新支付");
			// }
// 			if (this.commonJs.isTerminal() == 'isAndroid') {
// 				if (window.history && window.history.pushState) {
// 					history.pushState(null, null, document.URL);
// 					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
// 				}
// 			}
		},
		destroyed() {
			// window.removeEventListener('popstate', this.fun, false);
		},
		methods: {
			
			//  openhx(){
				
			// 	  this.xdalag=true;
			// 	  this.$vux.loading.show()
			// 	  // this.checkCoupon("close")
			//  },
			// 返回卡券 -- 优势科目剩余次数 
			// getusage() {
			// 	this.$vux.loading.show({text: '正在加载'})
			// 	var xkzhvoms;
			// 	getUsage(ls.get('userType')).then(res => {
			// 		if (res.code == '0') {
			// 			let xkZhtimes;
			// 			if (res.data) {
			// 				if(res.data.sumCount ==-1){
			// 					xkZhtimes= 10000
			// 					this.xkzhTimes= '无限'
			// 				}else{
			// 					xkZhtimes = res.data.surplusCount;
			// 					this.xkzhTimes= res.data.surplusCount;
			// 				}		
												
												
			// 				this.xkzhvoms = res.data.volume
			// 			} else {
			// 				xkZhtimes = 0
			// 				this.xkzhvoms = 0
			// 				// ls.set('couponsxk', 0)
			// 			}
			// 			ls.set('xkZhtimes', xkZhtimes)
			// 			this.checkkm()
			// 		}
			// 		this.$vux.loading.hide()
			// 	}).catch((error) => {
			// 		this.$vux.toast.text(error);
			// 		this.$vux.loading.hide()
			// 	})
			// },
			// 返回卡券 -- 测评剩余次数
			// checkkm() {
	
			// 	getAdvantageUsage(ls.get('userType')).then(res => {
			// 		if (res.code == '0') {
			// 			let xkKmtimes;
			// 			if (res.data) {
			// 				if(res.data.sumCount ==-1){
			// 					xkKmtimes= 10000
			// 				}else{
			// 					xkKmtimes = res.data.surplusCount
			// 				}
							
			// 				this.xkkmvoms = res.data.volume
			// 			} else {
			// 				xkKmtimes = 0
			// 				this.xkkmvoms = 0
			// 			}
			// 			ls.set('xkKmtimes', xkKmtimes) // 剩余次数

			// 			console.log(this.xkzhvoms, this.xkkmvoms)
			// 			if(this.xkzhvoms==0&&this.xkkmvoms==0){
			// 				ls.set('couponsxk',0)
			// 			}else if(this.xkzhvoms !=0){
			// 				ls.set('couponsxk',this.xkzhvoms)
			// 			}else{
			// 				ls.set('couponsxk',this.xkkmvoms)
			// 			}
			// 		}

			// 		this.checkCoupon()  //新加的
					
			// 		this.$vux.loading.hide()
			// 	}).catch((error) => {
			// 		this.$vux.toast.text(error);
			// 		this.$vux.loading.hide()
			// 	})
			// },

			// checkCoupon(close) {
			
	
			// 	coupons({
			// 		sx_uid: ls.get('yxkData').userVoId,
			// 		product_code: "sx0020"
			// 	}).then(res => {
			// 		if (res.code == '200') {
			// 			let lens = res.data.length;
			// 			this.conponsyData = res.data
			// 			if (lens > 0) {
			// 			// this.conponsyData = res.data
			// 				this.volumes = res.data[0]
			// 				// let voms = this.conponsyData[0]
			// 				if (this.commonJs.GetUrlParam('pay_status') == 'success') {
			// 					if(close!=="close"){
			// 						this.xxbosx = true;
			// 					}
								
			// 					// this.xkverification()
			// 				}
			// 				if (ls.get('xkKmtimes') == 0 && ls.get('xkZhtimes') == 0) {
			// 					this.$vux.toast.text('您的账户内已购买该服务，正在为您开通服务权限。')
			// 					this.xkverification()
			// 				}
			// 			} else {
			// 			}
			// 		}
			// 		this.$vux.loading.hide()
			// 	}).catch((error) => {

			// 		this.$vux.loading.hide();
			// 	})
			// },


			// xkverification() {
			// 	console.log("我执行了核销的方法")
			// 	if (ls.get('xkZhtimes') > 0 || ls.get('xkKmtimes') > 0) {
			// 		this.$vux.toast.text('您的卡劵还有次数没有用完，请用完后再核销下一张~');
			// 		return false;
			// 	}
			// 	verification({
			// 		uid: ls.get('yxkData').userVoId,
			// 		userType: ls.get('yxkData').userType,
			// 		volume: this.volumes
			// 	}, true).then(res => {
			// 		if (res.code == '0') {
			// 			// this.cpSituation()
			// 			this.xdalag = false;
						
			// 			this.getusage()
			// 			// this.checkCoupon()
			// 			this.copus = ''
			// 		}else if(res.code==400){
			// 			this.$vux.toast.text('您账户内的服务状态已经失效，请重新购买商品后进行该服务。如需帮助请联系客服 027-88161985。')
			// 		}else{
			// 			this.$vux.toast.text(res.message)
			// 		}
					
			// 	}).catch((error) => {

			// 		this.$vux.loading.hide();
			// 	})
			// },

			closeDaliag() {
				this.xdalag = false
				this.copus = ''
				
				
			},
			sureCoupon() {
				
				if (this.spIndex === 100) {
					this.volumes = this.copus
				}
				if (this.volumes == '' || this.volumes == undefined) {
					this.$vux.toast.text('您没有绑定卡劵');
					return false;
				}
				
				this.xkverification(this.volumes)
				

			},
			hexiao(item, index) {
				this.spIndex = index;
				this.volumes = item
			},
			hexiao1() {

				this.spIndex = 100;

			},

			getChildData(data) {
				let str = '';
				data.forEach(item => {
					str += item.nm
				})
				this.childData = data;
				this.strs = str
				console.log(str)
				console.log(this.childData)
			},
			tabs(mun) {
				this.tabsNum = mun
				mun === 1 ? this.stall = this.strs1 : this.stall = this.strs
			},
			goNext() {
		

				if (this.tabsNum == 1) {
					this.stall = this.strs1;
				} else {
					this.stall = this.strs;
				}
				if (this.stall == '') {
					this.$vux.toast.text('请测评后进行下一步')
					return false;
				}
				ls.set('preUrl', 'advanCourse')
				this.commonJs.gosto('bestPlan', this.stall)
				// 				if (ls.get('xkZhtimes') == 0) {
				// 					this.commonJs.gosto('bestPlan', this.stall)
				// 				} else {
				// 					this.commonJs.gosto('bestPlan', this.stall)
				// 				}


				// this.commonJs.gosto('bestPlan', this.stall)


			},
		}
	}
</script>

<style lang="less" scoped>
	.btnGroup {
		width: 100%;
		padding: 0 0.5rem;
		box-sizing: border-box;
		margin: 0.3rem auto;
		position: absolute;
		bottom: 0.2rem;

		button {
			height: 0.8rem;
			border-radius: 0.1rem;
			letter-spacing: 0.05rem;
			font-size: 0.36rem;
			font-weight: bold;
		}

		.reset {
			border: 1px solid #EEE;
			background: #FFF;
			color: #999;
			margin-right: 0.2rem;
		}

		.submit {
			border: none;
			background: @mainColor;
			color: #FFF;
		}
	}

	.x-daliag-wrap,
	.xx-sures {
		position: fixed;
		width: 7.5rem;
		height: 100vh;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 4;
	}

	.x-daliag-box,
	.xx-box {
		width: 80%;
		height: 60vh;
		margin: 20vh auto;
		background: #fff;
		border-radius: 0.1rem;
		overflow: hidden;
		position: relative;

		// 		.xx-box-btn {
		// 			position: absolute;
		// 			bottom: 0.2rem;
		// 		}

		.xx-box-sp {
			width: 90%;
			display: block;
			height: auto;
			font-size: 0.3rem;
			line-height: 0.4rem;
			border: 1px solid #eee;
			padding: 0.2rem 0.3rem;
			box-sizing: border-box;
			// margin-bottom: 0.2rem;
			text-align: center;
			color: #222;
			margin: 0 auto 0.2rem;
			border-radius: 0.1rem;
		}

		.xpsucces {
			display: block;
			font-size: 0.3rem;
			text-align: center;
			color: #89cc4e;
			height: 0.6rem;
			line-height: 0.6rem;

		}

		.sptext {
			display: block;
			font-size: 0.26rem;
			text-align: center;
			line-height: 0.4rem;
			margin-top: 0.1rem;
			color: #999;
			padding: 0 0.3rem;
			box-sizing: border-box;
		}
	}

	.xx-sures .xx-box {
		h2 {
			display: block;
			height: 0.8rem;
			line-height: 0.8rem;
			font-size: 0.3rem;
			text-align: center;
			font-weight: bold;
			letter-spacing: 0.02rem;
		}
	}

	.x-daliag-wrap .x-daliag-box {
		h3 {
			margin-top: 0.2rem;
			display: block;
			padding: 0 0.3rem;
			text-align: center;
			font-size: 0.3rem;
			color: #222;
			font-weight: bold;
		}

		.x-daliag-sp {
			display: block;
			width: 5rem;
			height: 0.8rem;
			text-align: center;
			line-height: 0.8rem;
			font-size: 0.24rem;
			margin: 0.2rem auto 0rem;
			border: 1px solid #eee;
			border-radius: 0.1rem;

		}

		.active {
			border: 1px solid @mainColor;
			color: @mainColor;
		}

		.x-input {
			input {
				outline: none;
				border: none;
				font-size: 0.3rem;
				display: block;
				width: 100%;
				height: 100%;
				padding: 0.1rem 0.3rem;
				box-sizing: border-box;
			}
		}
	}



	.xxBox {
		position: absolute;
		left: 0;
		bottom: 0.2rem;
		width: 100%;
		height: 1rem;

		.xxsp {
			width: 0.8rem;
			height: 0.8rem;
			display: block;
			border-radius: 50%;
			margin: 0 auto;
			border: 1px solid #eee;

			img {
				width: 0.3rem;
				height: 0.3rem;
				display: block;
				margin: 0.25rem auto;
			}
		}
	}



	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0rem;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color: rgba(82, 196, 26, 1);

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.tzbox {
		padding: 0 0.3rem;
		box-sizing: border-box;
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.botFixed {
		position: fixed;
		height: 1.6rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
		left: 0;
		bottom: 0;
		width: 7.5rem;
		overflow: hidden;

		.cssp {
			display: block;
			height: 0.6rem;
			font-size: 0.26rem;
			text-align: center;
			line-height: 0.6rem;
			color: rgba(187, 187, 187, 1);
			letter-spacing: 0.02rem;

			b {
				color: @mainColor;
				font-weight: bold;
			}
		}

		.ss2 {
			width: 3.8rem;
			height: 0.7rem;
			// background: rgba(108, 191, 32, 1);
			border-radius: 0.1rem;
			font-size: 0.3rem;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			display: block;
			line-height: 0.7rem;
			margin: 0.1rem auto 0.2rem;
		}

		.ss1 {
			background: #eee
		}

		.ss2 {
			background: @mainColor;
		}
	}

	.header {
		width: 100%;
		height: 0.88rem;
		text-align: right;
		padding: 0 0.3rem;
		background: transparent;
		font-size: 0.3rem;
		letter-spacing: 0.05rem;
		color: #222;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.imgIcon {
			width: 0.4rem;
			height: 0.4rem;
		}
	}

	.outDiv {
		.fixh2 {
			position: fixed;
			left: 1.75rem;
			top: 0;
			font-size: 0.4rem;
			width: 4rem;
			height: 0.8rem;
			text-align: center;
			line-height: 0.8rem;
			
			color: #222;
			font-weight: bold;



		}

		width: 100%;
		height: 100vh;
		background: #FFF;

		.advanmain {
			margin-top: 0.2rem;
			padding: 0 0.3rem;

			.careerTests {
				margin-bottom: 0.31rem;

				.title {
					height: 0.6rem;
					line-height: 0.6rem;
					letter-spacing: 0.02rem;
					margin-bottom: 0.2rem;
					overflow: hidden;

					.left {

						width: 100%;
						height: 0.6rem;

						.sp1 {
							color: #222;
							font-weight: bold;
							font-size: 0.3rem;
						}

						.bsp {
							float: right;
							font-size: 0.26rem;
							color: @mainColor;
						}
					}

					.right {
						font-size: 0.26rem;
						font-weight: bold;
						color: @mainColor;
					}
				}

				.tabBar {
					width: 100%;
					height: 0.8rem;
					border-radius: 0.4rem;
					border: 1px solid rgba(238, 238, 238, 1);
					margin-bottom: 0.2rem;
					
					.sp {
						text-align: center;

						img {
							width: 0.4rem;
							height: 0.4rem;
							// background: red;
							vertical-align: middle;
						}

						b {
							font-size: 0.3rem;

							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.8rem;
							vertical-align: middle;
							margin-left: 0.15rem;
						}
					}

				}

				.content_no_add {
					width: 100%;
					height: 3rem;
					background: #FAFAFA;
					border-radius: 0.1rem;
					text-align: center;
					padding-top: 0.9rem;

					p {
						font-size: 0.26rem;
						font-weight: bold;
						color: #999;
						margin-bottom: 0.2rem;
					}

					button {
						width: 1.8rem;
						height: 0.6rem;
						line-height: 0.6rem;
						text-align: center;
						border-radius: 0.1rem;
						border: 1px solid @mainColor;
						color: @mainColor;
						font-size: 0.26rem;
						// font-weight: bold;
						letter-spacing: 0.03rem;
						background: transparent;
						padding: 0;
						outline: none;
					}
				}

				.ysBox {
					width: 100%;
					height: auto;
					margin-top: 0.2rem;
					padding: 0 0.3rem;
					box-sizing: border-box;

					overflow: hidden;

					.spys {
						margin-bottom: 0.3rem;
						display: block;
						width: 100%;
						height: 0.8rem;
						text-align: center;
						line-height: 0.8rem;
						background: rgba(250, 250, 250, 1);
						border-radius: 0.1rem;

						i {
							font-size: 0.34rem;
							font-family: 'DIN-Bold';
							font-weight: bold;
							color: rgba(187, 187, 187, 1);
						}

						b {
							font-size: 0.34rem;
							font-weight: bold;
							color: rgba(102, 102, 102, 1);
							margin-left: 0.4rem;
						}
					}

					.gocp {
						display: block;
						text-align: center;
						height: 0.5rem;
						font-size: 0.3rem;
						font-family: 'PingFang-SC-Bold';
						// font-weight: bold;
						color:@mainColor;
						margin-top: 0.2rem;

					}
				}



			}


		}
	}
</style>
